<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    colorList: {
      type: Array,
      default:['#B881FF', '#5DC999', '#FF7397', '#5BA6F6', '#FFBC65', '#A1D8D5', '#519ABD', '#48ADC2','#D82A17', '#075A8C', '#196157', '#0583F1', '#E58278', '#C0A287', '#BBC323', '#C06057']
    },
    echartData: {
      type: Array,
      default: []
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    echartData: { // 监控该变量，重新赋值并刷新图表
      handler(newVal, oldVal) {
        this.echartData = newVal
        this.initChart(this.echartData)
      },
      deep: true // 必须设置
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.echartData)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(seriesData) {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: "病症细分分析",
          left: "left",
          top: "top",
          textStyle: {
            fontSize: 14,
            color: '#333',
            fontWeight: 'bold'
          },

        },
        color:this.colorList,
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['30%', '40%'],
            label: {
              show: true,
              color: '#333',
              fontWeight: 'bold',
              formatter(param) {
                return param.name;
              }
            },
            labelLine:{
              lineStyle:{
                color:'#004EA2',
                cap:'round',

              }
            },
            data: seriesData
          }
        ]
      })
    }
  }
}
</script>
